<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机字生成</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            padding: 40px; /* 设置内边距为40px，避免内容顶边 */
        }

        .box {
            width: 50vw; /* 宽度为视口宽度的50% */
            padding-top: 50vw; /* 高度与宽度相等 */
            border: 2px solid #000;
            position: relative;
            margin-bottom: 10vh; /* 间距为视口高度的10% */
            background-color: #fff;
            overflow: hidden; /* 防止字超出框 */
        }

        .box div {
            font-weight: bold;
            text-align: center;
            line-height: 1; /* 调整行高以适应字体大小 */
            position: absolute;
        }

        button {
            padding: 2vw 4vw; /* 按钮的内边距为视口宽度的2%和4% */
            font-size: 4vw; /* 字体大小为视口宽度的4% */
            cursor: pointer;
        }

        input[type="number"], input[type="text"], input[type="range"], select {
            margin-bottom: 2vh; /* 间距为视口高度的2% */
            padding: 2vw; /* 内边距为视口宽度的2% */
            font-size: 4vw; /* 字体大小为视口宽度的4% */
            width: 70vw; /* 宽度为视口宽度的70% */
        }

        .toggle-button {
            display: inline-block;
            padding: 2vw 4vw; /* 内边距为视口宽度的2%和4% */
            font-size: 4vw; /* 字体大小为视口宽度的4% */
            cursor: pointer;
            background-color: #ccc;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }

        .toggle-button.on {
            background-color: #2196F3;
            color: white;
        }

        .toggle-button.off {
            background-color: #ccc;
            color: black;
        }

        hr {
            width: 70vw; /* 宽度为视口宽度的70% */
            border: 1px solid #ddd;
            margin: 2vh 0; /* 间距为视口高度的2% */
        }

        /* 小于600px的屏幕 */
        @media (max-width: 600px) {
            .box {
                width: 70vw; /* 宽度为视口宽度的70% */
                padding-top: 70vw; /* 高度与宽度相等 */
            }

            button, input[type="number"], input[type="text"], input[type="range"], select, .toggle-button {
                font-size: 5vw; /* 字体大小为视口宽度的5% */
            }

            hr {
                width: 90vw; /* 宽度为视口宽度的90% */
            }
        }

        /* 大于600px的屏幕 */
        @media (min-width: 600px) {
            .box {
                width: 50vw; /* 宽度为视口宽度的50% */
                padding-top: 50vw; /* 高度与宽度相等 */
            }

            button, input[type="number"], input[type="text"], input[type="range"], select, .toggle-button {
                font-size: 4vw; /* 字体大小为视口宽度的4% */
            }

            hr {
                width: 70vw; /* 宽度为视口宽度的70% */
            }
        }
    </style>
</head>
<body>
    <div class="box" id="box"></div>
    <input type="number" id="numInput" min="1" max="8" placeholder="输入1到8的数字" />
    <input type="text" id="customInput" placeholder="输入内容，用空格分隔" />
    <button id="generateButton">生成</button>
    <hr>
    <button id="colorToggle" class="toggle-button off">关闭随机颜色</button>
    <input type="range" id="sizeSlider" min="0.1" max="1" step="0.1" value="0.5">
    <label for="sizeSlider">字体大小（框的1/10到1/1）</label>
    <input type="range" id="rotateSlider" min="0" max="360" step="1" value="0">
    <label for="rotateSlider">字体旋转角度</label>
    <select id="alignSelector">
        <option value="none" selected>空白（不对齐）</option>
        <option value="left">左对齐</option>
        <option value="center">居中对齐</option>
        <option value="right">右对齐</option>
        <option value="top-left">左上</option>
        <option value="top-center">顶部居中</option>
        <option value="top-right">右上</option>
        <option value="bottom-left">左下</option>
        <option value="bottom-center">底部居中</option>
        <option value="bottom-right">右下</option>
    </select>
    <label for="alignSelector">对齐方式</label>

    <script>
        const box = document.getElementById('box');
        const generateButton = document.getElementById('generateButton');
        const numInput = document.getElementById('numInput');
        const customInput = document.getElementById('customInput');
        const colorToggle = document.getElementById('colorToggle');
        const sizeSlider = document.getElementById('sizeSlider');
        const rotateSlider = document.getElementById('rotateSlider');
        const alignSelector = document.getElementById('alignSelector');
        const words = [
            '一', '乙', 'L', '乀', '八', '丷', '乛', '丿', '卜', '厂',
            '刀', '刂', '冂', '儿', '几', '匚', '冖', '力', '丌', '人',
            '入', '十', '又', '厶', '艹', '屮', '彳', '巛', '川', '辶',
            '寸', '大', '飞', '干', '工', '弓', '井', '广', '己', '彐',
            '彑', '巾', '口', '马', '门', '宀', '女', '犭', '山', '彡',
            '尸', '饣', '土', '扌', '氵', '纟', '已', '兀', '夕', '小',
            '忄', '冫', '弋', '夂', '子', '贝', '比', '爫', '长', '车',
            '歹', '斗', '厄', '方', '风', '父', '戈', '卝', '户', '火',
            '无', '见', '斤', '耂', '毛', '木', '肀', '牛', '爿', '片',
            '攴', '攵', '气', '欠', '犬', '日', '氏', '礻', '手', '殳',
            '水', '瓦', '王', '韦', '文', '毋', '心', '牙', '交', '月',
            '支', '止', '爪', '白', '夂', '甘', '瓜', '禾', '钅', '立',
            '龙', '矛', '皿', '母', '目', '疒', '鸟', '皮', '生', '石',
            '矢', '示', '田', '玄', '穴', '礻', '足', '业', '用', '玉',
            '耒', '臣', '虫', '而', '耳', '缶', '良', '虍', '米', '齐',
            '肉', '色', '舌', '西', '页', '先', '行', '血', '羊', '聿',
            '至', '舟', '衣', '⺮', '自', '羽', '糸', '糹', '采', '阝',
            '辰', '赤', '豆', '谷', '角', '克', '里', '卤', '麦', '身',
            '豕', '辛', '言', '邑', '豸', '走', '青', '雨', '齿', '长',
            '非', '阜', '金', '隶', '食', '鱼', '佳', '风', '革', '骨',
            '鬼', '韭', '首', '韦', '香', '页', '音', '髟', '鬯', '高',
            '鬲', '黄', '卤', '鹿', '麻', '麦', '鸟', '鱼', '鼎', '黑',
            '黽', '黍', '黹', '鼓', '鼠', '鼻', '齊', '齿', '龙', '龠'
        ]; // 预设的字

        colorToggle.addEventListener('click', () => {
            if (colorToggle.classList.contains('on')) {
                colorToggle.classList.remove('on');
                colorToggle.classList.add('off');
                colorToggle.textContent = '关闭随机颜色';
            } else {
                colorToggle.classList.remove('off');
                colorToggle.classList.add('on');
                colorToggle.textContent = '开启随机颜色';
            }
        });

        generateButton.addEventListener('click', () => {
            const numWords = parseInt(numInput.value, 10);
            if (isNaN(numWords) || numWords < 1 || numWords > 8) {
                alert("请输入1到8之间的数字！");
                return;
            }

            const customContent = customInput.value.trim();
            const customWords = customContent ? customContent.split(/\s+/) : [];
            const sourceWords = customWords.length > 0 ? customWords : words;

            box.innerHTML = '';

            const selectedWords = [];
            for (let i = 0; i < numWords; i++) {
                const randomIndex = Math.floor(Math.random() * sourceWords.length);
                selectedWords.push(sourceWords[randomIndex]);
            }

            for (let i = 0; i < selectedWords.length; i++) {
                const wordDiv = document.createElement('div');
                wordDiv.textContent = selectedWords[i];

                // 动态调整字体大小，确保字不会超出边框
                const maxFontSize = Math.min(box.offsetWidth, box.offsetHeight) * sizeSlider.value;
                wordDiv.style.fontSize = `${maxFontSize}px`;

                // 确保字的位置始终在边框内
                const maxLeft = box.offsetWidth - maxFontSize;
                const maxTop = box.offsetHeight - maxFontSize;
                const randomLeft = Math.random() * maxLeft;
                const randomTop = Math.random() * maxTop;

                wordDiv.style.left = `${randomLeft}px`;
                wordDiv.style.top = `${randomTop}px`;

                wordDiv.style.transform = `rotate(${rotateSlider.value}deg)`;

                if (colorToggle.classList.contains('on')) {
                    const randomColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
                    wordDiv.style.color = randomColor;
                }

                box.appendChild(wordDiv);
            }
        });

        rotateSlider.addEventListener('input', () => {
            const wordDivs = box.querySelectorAll('div');
            wordDivs.forEach(div => {
                div.style.transform = `rotate(${rotateSlider.value}deg)`;
            });
        });

        alignSelector.addEventListener('change', () => {
            const wordDivs = box.querySelectorAll('div');
            wordDivs.forEach(div => {
                const alignValue = alignSelector.value;
                if (alignValue === 'none') {
                    // 随机位置，但确保在边框内
                    const maxLeft = box.offsetWidth - div.offsetWidth;
                    const maxTop = box.offsetHeight - div.offsetHeight;
                    const randomLeft = Math.random() * maxLeft;
                    const randomTop = Math.random() * maxTop;
                    div.style.left = `${randomLeft}px`;
                    div.style.top = `${randomTop}px`;
                } else {
                    switch (alignValue) {
                        case 'left':
                            div.style.left = '0';
                            div.style.top = '50%';
                            div.style.transform = `translateY(-50%) rotate(${rotateSlider.value}deg)`;
                            break;
                        case 'center':
                            div.style.left = '50%';
                            div.style.top = '50%';
                            div.style.transform = `translate(-50%, -50%) rotate(${rotateSlider.value}deg)`;
                            break;
                        case 'right':
                            div.style.right = '0';
                            div.style.top = '50%';
                            div.style.transform = `translateY(-50%) rotate(${rotateSlider.value}deg)`;
                            break;
                        case 'top-left':
                            div.style.left = '0';
                            div.style.top = '0';
                            break;
                        case 'top-center':
                            div.style.left = '50%';
                            div.style.top = '0';
                            div.style.transform = `translateX(-50%) rotate(${rotateSlider.value}deg)`;
                            break;
                        case 'top-right':
                            div.style.right = '0';
                            div.style.top = '0';
                            break;
                        case 'bottom-left':
                            div.style.left = '0';
                            div.style.bottom = '0';
                            break;
                        case 'bottom-center':
                            div.style.left = '50%';
                            div.style.bottom = '0';
                            div.style.transform = `translateX(-50%) rotate(${rotateSlider.value}deg)`;
                            break;
                        case 'bottom-right':
                            div.style.right = '0';
                            div.style.bottom = '0';
                            break;
                    }
                }
            });
        });
    </script>
</body>
</html>
